.jianpu-char {
    height: 40rpx;
    width: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    text-align: center;
    display: flex;
    color: #233;

    &.jianpu-char-2 {
        width: 80rpx;
    }

    &.jianpu-char-3 {
        width: 120rpx;
    }

    &.jianpu-char-4 {
        width: 160rpx;
    }

    &.jianpu-char-5 {
        width: 200rpx;
    }

    &.jianpu-char-6 {
        width: 240rpx;
    }
}




.jianpu-char-main {
    height: 100%;
    width: 40rpx;
    position: relative;
}

.jianpu-char-low {
    position: absolute;
    bottom: 0;
    height: 80%;
    left: 50%;
    transform: translateX(-50%);
}

.jianpu-char-high {
    position: absolute;
    top: -50%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.jianpu-char-pai-half {
    height: 6rpx;
    box-sizing: border-box;
    border-bottom: 1px solid currentColor;
    width: 30%;
    left: 50%;
    position: absolute;
    bottom: 8rpx;
    transform: translateX(-50%);
}

.jianpu-char-pai-half-half {
    height: 6rpx;
    box-sizing: border-box;
    border-bottom: 1px solid currentColor;
    width: 30%;
    left: 50%;
    position: absolute;
    bottom: 6rpx;
    transform: translateX(-50%);
}

.jianpu-char-pai {
    width: 40rpx;
    height: 40rpx;
    position: relative;
}

.jianpu-char-pai-inner {
    position: absolute;
    border-bottom: 1px solid #000;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.jianpu-char-pai-point {
    position: absolute;
    width: 100%;
    text-align: center;
    top: -20%;
    font-weight: bold;
}

.jianpu-char-split {
    border-right: 2rpx solid #b5612c;
}

.jianpu-char-active {
    background-color: #b5612c;

    &.jianpu-char-active-editting{
      background-color: #f00;
    }
}
